import * as React from 'react'

interface IconProps {
    className?: string
}

export const ExtensionsNavIcon: React.FunctionComponent<IconProps> = ({ className }) => (
    <svg
        className={className}
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M13.9103 7.38909H13.0424V4.67394C13.0424 3.72364 12.2715 2.95273 11.3212 2.95273H8.61091V2.0897C8.61091 0.916364
    7.69455 0 6.52121 0C5.34788 0 4.43152 0.916364 4.43152 2.0897V2.95758H1.71636C0.770909 2.95758 0 3.72849 0
    4.67394V7.72364H1.35273C2.31758 7.72364 3.10303 8.50909 3.10303 9.47394C3.10303 10.4388 2.31758 11.2242 1.35273 11.2242H0V14.2739C0
    15.2291 0.770909 16 1.72121 16H4.77091V14.6473C4.77091 13.6824 5.55636 12.897 6.52121 12.897C7.48606 12.897 8.27151 13.6824 8.27151
    14.6473V16H11.3212C12.2715 16 13.0424 15.2291 13.0424 14.2788V11.5685H13.9103C15.0836 11.5685 16 10.6521 16 9.47879C16 8.30545
    15.0836 7.38909 13.9103 7.38909ZM13.9103 10.0315H11.5103V14.2788C11.5103 14.3758 11.423 14.463 11.3261 14.463H9.80849C9.71152
    12.7273 8.28606 11.36 6.52606 11.36C4.76606 11.36 3.34061 12.7273 3.24364 14.463H1.72121C1.62424 14.463 1.53697 14.3758 1.53697
    14.2788V12.7612C3.27273 12.6642 4.64 11.2388 4.64 9.47879C4.64 7.71879 3.27273 6.29333 1.53697 6.19636V4.67394C1.53697 4.57697
    1.62424 4.4897 1.72121 4.4897H5.96849V2.0897C5.96849 1.7697 6.20121 1.53697 6.52121 1.53697C6.84121 1.53697 7.07394 1.7697 7.07394
    2.0897V4.4897H11.3212C11.4182 4.4897 11.5055 4.57697 11.5055 4.67394V8.92121H13.9055C14.2255 8.92121 14.4582 9.15394 14.4582
    9.47394C14.463 9.79879 14.2303 10.0315 13.9103 10.0315Z"
        />
    </svg>
)

/** Default registry icon for non-Sourcegraph extensions */
export const DefaultExtensionIcon: React.FunctionComponent<IconProps> = ({ className }) => (
    <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <path
            d="M41.407 23.21c-1.64.468-3.681 3.22-3.757 2.091-.033-.56-.175-1.857-.184-3.18-.025-3.773.193-9.429.193-9.429 0-.192-.017-.376-.059-.552a2.512 2.512 0 00-.72-1.355c-.025-.025-.05-.042-.075-.067a4.077 4.077 0 00-.292-.243c-.11-.075-.235-.142-.352-.209-.05-.025-.092-.05-.142-.075-.025-.009-.05-.017-.067-.025a4.16 4.16 0 00-1.623-.343l-1.548.033s-1.966.067-4.225.117H22.89c-.468-.025-.778-.058-.895-.117-1.255-.586 1.481-2.644 1.891-3.832C24.958 2.894 22.147 0 18.834 0c-3.322 0-6.133 2.895-5.046 6.04.419 1.189 3.288 3.28 1.891 3.833-.184.075-1.23.109-2.593.109h-1.289c-3.104-.009-6.92-.1-6.92-.1L3.33 9.847c-1.389 0-3.004.652-3.246 2.217-.05.209-.084.636-.084.636l.025 11.646c.017.193.034.335.059.385.552 1.397 3.597-2.25 4.785-2.669 3.138-1.096 5.037 3.623 5.037 6.953 0 3.338-2.886 6.15-6.024 5.062-1.188-.419-3.238-3.155-3.823-1.9a.773.773 0 00-.059.243v12.91A2.703 2.703 0 002.694 48h12.5c.167-.017.293-.033.343-.05 1.397-.56-.519-1.866-.895-3.196-.912-3.205.862-3.765 4.192-3.765s4.902.836 4.902 3.12c0 1.172-3.145 3.247-1.89 3.832.041.017.117.034.217.05H34.94a2.703 2.703 0 002.702-2.71s-.268-12.057-.05-13.571c.159-1.096 2.702 1.18 3.815 1.648 4.142 1.724 6.074-1.732 6.074-5.087 0-3.355-2.853-5.982-6.074-5.062z"
            fill="#95A5C6"
            fillOpacity=".32"
        />
    </svg>
)

/** Default registry icon for Sourcegraph extensions */
export const DefaultSourcegraphExtensionIcon: React.FunctionComponent<IconProps> = ({ className }) => (
    <svg
        width="48"
        height="48"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
    >
        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
            <path
                d="M41.407 23.2093C39.7671 23.6779 37.7256 26.4305 37.6503 25.301C37.6169 24.7405 37.4746 23.4436 37.4663 22.1217C37.4412 18.3483 37.6587 12.6923 37.6587 12.6923C37.6587 12.4999 37.642 12.3158 37.6001 12.1401C37.4997 11.5796 37.232 11.1361 36.8806 10.7847C36.8555 10.7596 36.8304 10.7429 36.8053 10.7178C36.7133 10.6341 36.6129 10.5505 36.5125 10.4752C36.4037 10.3999 36.2782 10.3329 36.1611 10.266C36.1109 10.2409 36.069 10.2158 36.0188 10.1907C35.9937 10.1823 35.9686 10.174 35.9519 10.1656C35.4332 9.93969 34.8558 9.82256 34.3287 9.82256L32.7809 9.85602C32.7809 9.85602 30.8147 9.92296 28.5557 9.97316H22.8914C22.4229 9.94806 22.1133 9.91459 21.9962 9.85602C20.7412 9.27035 23.4771 7.21213 23.887 6.02405C24.958 2.89489 22.1468 0 18.8335 0C15.5119 0 12.7007 2.89489 13.7884 6.04079C14.2067 7.22887 17.0765 9.32055 15.6793 9.87276C15.4952 9.94806 14.4494 9.98152 13.0856 9.98152H11.7971C8.69305 9.97316 4.87781 9.88112 4.87781 9.88112L3.32996 9.84766C1.94108 9.84766 0.326303 10.5003 0.0836674 12.0648C0.033467 12.274 0 12.7007 0 12.7007L0.0251002 24.3472C0.0418337 24.5397 0.0585672 24.6819 0.0836674 24.7321C0.635872 26.1293 3.68137 22.4814 4.86944 22.0631C8.00697 20.9671 9.90622 25.6859 9.90622 29.0159C9.90622 32.3542 7.0197 35.1654 3.88217 34.0777C2.69409 33.6594 0.644239 30.9235 0.0585672 32.1785C0.033467 32.2203 0.0167335 32.304 0 32.4211V45.331C0.0251002 46.8119 1.22154 48 2.69409 48H15.194C15.3613 47.9833 15.4868 47.9665 15.537 47.9498C16.9343 47.3892 15.0183 46.084 14.6418 44.7537C13.7298 41.5492 15.5036 40.9887 18.8335 40.9887C22.1635 40.9887 23.7364 41.8253 23.7364 44.1095C23.7364 45.2808 20.5906 47.3558 21.8456 47.9414C21.8874 47.9582 21.9627 47.9749 22.0631 47.9916H34.9395C36.4372 47.9916 37.642 46.7785 37.642 45.2808C37.642 45.2808 37.3742 33.2243 37.5918 31.71C37.7507 30.6139 40.2942 32.8897 41.407 33.3582C45.5485 35.0817 47.4813 31.6263 47.4813 28.2712C47.4813 24.9162 44.6282 22.289 41.407 23.2093Z"
                fill="#D5E4F6"
            />
        </mask>
        <g mask="url(#mask0)">
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M9.94394 33.0201L-3.26866 28.731C-6.11988 27.8033 -7.66723 24.784 -6.72289 21.9832C-5.78083 19.1824 -2.70661 17.6661 0.144605 18.5893L11.5793 22.3029L8.3598 10.7511C7.56565 7.90572 9.27228 4.96891 12.1667 4.19066C15.0635 3.41242 18.0535 5.08709 18.8476 7.93025L22.0894 19.5601L30.183 10.5904C32.1764 8.38278 35.6101 8.17986 37.8583 10.1355C40.1065 12.0911 40.3136 15.465 38.3225 17.6727L29.0305 27.9705L42.2689 32.2699C45.1178 33.1931 46.6674 36.2124 45.7231 39.0132C44.7788 41.8117 41.7046 43.3326 38.8533 42.4049L27.4229 38.6943L30.6439 50.2498C31.4358 53.093 29.7314 56.0298 26.8347 56.8103C23.938 57.5863 20.9479 55.9116 20.1538 53.0684L16.9043 41.4092L8.78639 50.4058C6.79531 52.6134 3.35929 52.8186 1.11108 50.8629C-1.13712 48.9073 -1.34419 45.5311 0.64688 43.3235L9.94394 33.0201Z"
                fill="url(#paint0_linear)"
            />
        </g>
        <path
            d="M41.407 23.2093C39.7671 23.6779 37.7256 26.4305 37.6503 25.301C37.6169 24.7405 37.4746 23.4436 37.4663 22.1217C37.4412 18.3483 37.6587 12.6923 37.6587 12.6923C37.6587 12.4999 37.642 12.3158 37.6001 12.1401C37.4997 11.5796 37.232 11.1361 36.8806 10.7847C36.8555 10.7596 36.8304 10.7429 36.8053 10.7178C36.7133 10.6341 36.6129 10.5505 36.5125 10.4752C36.4037 10.3999 36.2782 10.3329 36.1611 10.266C36.1109 10.2409 36.069 10.2158 36.0188 10.1907C35.9937 10.1823 35.9686 10.174 35.9519 10.1656C35.4332 9.93969 34.8558 9.82256 34.3287 9.82256L32.7809 9.85602C32.7809 9.85602 30.8147 9.92296 28.5557 9.97316H22.8914C22.4229 9.94806 22.1133 9.91459 21.9962 9.85602C20.7412 9.27035 23.4771 7.21213 23.887 6.02405C24.958 2.89489 22.1468 0 18.8335 0C15.5119 0 12.7007 2.89489 13.7884 6.04079C14.2067 7.22887 17.0765 9.32055 15.6793 9.87276C15.4952 9.94806 14.4494 9.98152 13.0856 9.98152H11.7971C8.69305 9.97316 4.87781 9.88112 4.87781 9.88112L3.32996 9.84766C1.94108 9.84766 0.326303 10.5003 0.0836674 12.0648C0.033467 12.274 0 12.7007 0 12.7007L0.0251002 24.3472C0.0418337 24.5397 0.0585672 24.6819 0.0836674 24.7321C0.635872 26.1293 3.68137 22.4814 4.86944 22.0631C8.00697 20.9671 9.90622 25.6859 9.90622 29.0159C9.90622 32.3542 7.0197 35.1654 3.88217 34.0777C2.69409 33.6594 0.644239 30.9235 0.0585672 32.1785C0.033467 32.2203 0.0167335 32.304 0 32.4211V45.331C0.0251002 46.8119 1.22154 48 2.69409 48H15.194C15.3613 47.9833 15.4868 47.9665 15.537 47.9498C16.9343 47.3892 15.0183 46.084 14.6418 44.7537C13.7298 41.5492 15.5036 40.9887 18.8335 40.9887C22.1635 40.9887 23.7364 41.8253 23.7364 44.1095C23.7364 45.2808 20.5906 47.3558 21.8456 47.9414C21.8874 47.9582 21.9627 47.9749 22.0631 47.9916H34.9395C36.4372 47.9916 37.642 46.7785 37.642 45.2808C37.642 45.2808 37.3742 33.2243 37.5918 31.71C37.7507 30.6139 40.2942 32.8897 41.407 33.3582C45.5485 35.0817 47.4813 31.6263 47.4813 28.2712C47.4813 24.9162 44.6282 22.289 41.407 23.2093Z"
            fill="#95A5C6"
            fillOpacity="0.24"
        />
        <defs>
            <linearGradient id="paint0_linear" x1="19.5" y1="4" x2="19.5" y2="57" gradientUnits="userSpaceOnUse">
                <stop stopColor="#A2B0CD" stopOpacity="0" />
                <stop offset="1" stopColor="#A2B0CD" stopOpacity="0.3" />
            </linearGradient>
        </defs>
    </svg>
)

export const BannerPuzzleIcon: React.FunctionComponent<IconProps> = ({ className }) => (
    <svg
        className={className}
        width="69"
        height="62"
        viewBox="0 0 69 62"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <rect x="53" y="24" width="6.00004" height="6.00004" fill="#00B4F2" />
        <rect x="53" y="38" width="6.00004" height="6.00004" fill="#F96216" />
        <rect x="63" y="31.9995" width="6.00004" height="6.00004" fill="#B200F8" />
        <path
            d="M46.9317 38.8646H41.6219V46.2875H34.6197V36.9134H28.2732V22.9582H38.6708V29.1723H46.9423C47.524 29.1723 47.9894 28.7057 48 28.1225V16.1821C48 15.9382 47.9788 15.7049 47.926 15.4822C47.799 14.7717 47.4606 14.1991 47.0057 13.7537C46.974 13.7219 46.9423 13.7007 46.9105 13.6689C46.7942 13.5628 46.6673 13.4568 46.5403 13.3614C46.4028 13.2659 46.2442 13.1811 46.0961 13.0962C46.0326 13.0644 45.9797 13.0326 45.9163 13.0008C45.8845 12.9902 45.8528 12.9796 45.8316 12.969C45.1653 12.6827 44.4354 12.5342 43.7585 12.5342L41.7805 12.5766C41.7805 12.5766 39.2737 12.6615 36.3966 12.7251H29.1723C28.58 12.6933 28.1781 12.6509 28.03 12.5766C26.4328 11.8343 29.9127 9.20449 30.4416 7.68808C31.8167 3.69028 28.2309 0 24 0C19.7691 0 16.1833 3.69028 17.569 7.69868C18.0978 9.21509 21.7576 11.8768 19.9806 12.5872C19.7479 12.6827 18.4152 12.7251 16.6699 12.7251H15.0304C11.0745 12.7145 6.2089 12.5978 6.2089 12.5978L4.23094 12.5554C2.46452 12.5554 0.401939 13.3826 0.0951961 15.3762C0.0423094 15.6413 0 16.1927 0 16.1927L0.031732 31.0356C0.0528867 31.2795 0.0740414 31.4597 0.105773 31.5234C0.814456 33.3049 4.69634 28.6527 6.2089 28.1225C10.2071 26.7227 12.6294 32.7353 12.6294 36.9876C12.6294 41.2399 8.94843 44.8242 4.9502 43.435C3.43764 42.9048 0.825033 39.416 0.0740414 41.0172C0.0423094 41.0703 0.0211547 41.1763 0 41.3248V57.7826C0.031732 59.6701 1.55487 61.1865 3.43764 61.1865H19.3671C19.5787 61.1653 19.7373 61.1441 19.8008 61.1229C21.5778 60.4124 19.1385 58.7402 18.6626 57.0541C17.499 52.9715 19.7585 52.2551 24 52.2551C28.2415 52.2551 30.2512 53.3216 30.2512 56.2343C30.2512 57.7295 26.2424 60.37 27.8396 61.1229C27.8925 61.1441 27.9877 61.1653 28.1146 61.1865H44.5306C46.4346 61.1865 47.9788 59.6383 47.9788 57.7295V39.9144C47.9788 39.3312 47.5134 38.8646 46.9317 38.8646Z"
            fill="url(#paint0_linear)"
            fillOpacity="0.32"
        />
        <defs>
            <linearGradient id="paint0_linear" x1="24" y1="0" x2="24" y2="61.1865" gradientUnits="userSpaceOnUse">
                <stop stopColor="#95A5C6" />
                <stop offset="1" stopColor="#95A5C6" stopOpacity="0.6" />
            </linearGradient>
        </defs>
    </svg>
)

export const SourcegraphExtensionIcon: React.FunctionComponent<IconProps> = ({ className }) => (
    <svg className={className} viewBox="0 -2 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4.52023 2.60624L7.99231 15.3189C8.22611 16.173 9.10635 16.6761 9.95913 16.443C10.8119 16.2085 11.3137 15.3263 11.0805 14.4722L7.60779 1.75882C7.374 0.904702 6.49375 0.401608 5.64097 0.635403C4.78886 0.869197 4.28643 1.75145 4.52023 2.60624Z"
            fill="#F96216"
        />
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.9514 2.55785L2.25612 12.3913C1.66996 13.0545 1.73092 14.0687 2.39278 14.6562C3.05464 15.2437 4.06619 15.1821 4.65235 14.5189L13.3476 4.68544C13.9338 4.02224 13.8728 3.00869 13.211 2.42119C12.5491 1.83368 11.5382 1.89465 10.9514 2.55785Z"
            fill="#B200F8"
        />
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M1.09849 8.00782L13.499 12.1156C14.3384 12.3943 15.2434 11.9374 15.5214 11.0967C15.7994 10.2553 15.3432 9.34829 14.5045 9.07095L2.10333 4.96112C1.26395 4.68378 0.358918 5.13931 0.0815799 5.98071C-0.196428 6.8221 0.259103 7.72914 1.09849 8.00782Z"
            fill="#00B4F2"
        />
    </svg>
)

export const extensionBannerIconURL =
    ''
